<template>
  <div class="frame-outer">
    <div class="radius-bg">
      <span class="radius-bg-font-show">
        {{sentence}}
      </span>
      </div>
    <div class="search">
        <div class="logo-small">
          <img style="vertical-align: middle" src="../../assets/logo-nobg-nopj.png" width="35" height="28"/>
        </div>
        <div class="search-bar">
            <el-input
            v-model="forum"
            class="w-50 m-2"
            placeholder="搜索帖子"
            :prefix-icon="Search"/>
        </div>
    </div>
    <div class="category">
      <CategoryItem icon="notify"></CategoryItem>
      <CategoryItem icon="learn"></CategoryItem>
      <CategoryItem icon="roast"></CategoryItem>
      <CategoryItem icon="love"></CategoryItem>
    </div>
    <hr/>
    <div class="recommand">
      <div class="hot-post">
        
      </div>
      <div class="buy-post">

      </div>
    </div>
  </div>
</template>
<script>
  import {Search} from "@element-plus/icons-vue"
  import CategoryItem from "../../components/CategoryItem.vue"
  import sentence  from "../../data/sentence" 

  export default {
    
    data(){
        return {
            sentence:"",
            Search,
            homeView:true,
            title:"hello world",
            number:"hello",
            forum:""   
        }
    },

    components:{
      CategoryItem
    },

    methods:{
        
    },
  
    mounted(){
      let index = sentence.index
      this.sentence = index[Math.floor(Math.random() * index.length)]
    },
    beforeCreate(){
      
    },
    beforeDestroy(){

    }
}

  
</script>
<style>
  .radius-bg{
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
    text-align: center;
    line-height: 100px;
    font-size: 8px;
    font-family: "SimSun";
    font-weight: bold;
  }
  .radius-bg::after{
    content: '';
    width: 140%;
    height: 100px;
    position: absolute;
    left: -20%;
    top: 0px;
    z-index: 5;
    border-radius: 0 0 50% 50%;
    background-color: aqua;
  }
  .radius-bg-font-show{
    position: relative;
    z-index: 8;
  }
  .frame-outer{
    width: 100%;
    z-index: 1;
  }

  .search{
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }

  .search-bar{
    width:80%;
  }

  .small-logo{
    width: 10%;
  }

  .category{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 15px;

  }

</style>